<template>
    <div class="container-data" ref="companyData">
        <div class="container-data-left" ref="left">
            <p class="name">
                <span>公司名称</span><font>{{ authInfo.name }}</font>
            </p>
            <a-form-model :model="form" :rules="formRules" ref="ruleForm">
                <a-form-model-item class="item" prop="logo" :colon="false">
                    <span
                        slot="label"
                    >公司LOGO
                        <a-popover v-model="visible" trigger="hover">
                            <template slot="content"> 照片注意事项：头像不得含有联系方式，非官方授权信息 </template>
                            <a-icon type="question-circle" />
                        </a-popover>
                    </span>
                    <p slot="extra" class="tips">
                        支持上传jpe、jpeg、png <br />仅支持上传1张，图片不超过512K，尺寸为200*200
                    </p>
                    <custom-cropper-image
                        :width="200"
                        :height="200"
                        :path="path"
                        v-model="form.logo"
                        :max="1"
                        :fileSize="0.5"
                        keys="公司LOGO"
                    ></custom-cropper-image>
                </a-form-model-item>
                <a-form-model-item class="item" prop="liveShotList" :colon="false">
                    <span
                        slot="label"
                    >公司实景
                        <a-popover v-model="visibleTip" trigger="hover">
                            <template slot="content"> 照片注意事项：公司实景不得含有联系方式，非官方授权信息 </template>
                            <a-icon type="question-circle" />
                        </a-popover>
                    </span>
                    <p slot="extra" class="tips">
                        支持上传jpe、jpeg、png <br />仅支持上传9张，每张不超过6M，尺寸为400*262
                    </p>
                    <custom-cropper-image
                        :width="400"
                        :height="262"
                        :path="path"
                        v-model="form.liveShotList"
                        :max="9"
                        :fileSize="6"
                        keys="公司实景"
                    ></custom-cropper-image>
                </a-form-model-item>
                <a-form-model-item label="公司视频" class="item" :colon="false">
                    <p slot="extra" class="tips">仅支持上传一段视频，视频大小不超过50M</p>
                    <custom-video-upload
                        v-model="form.videoList"
                        path="/company-certification/video/"
                    ></custom-video-upload>
                </a-form-model-item>
                <a-form-model-item label="经营地址" prop="address" :colon="false">
                    <p slot="extra" class="tips">
                        目前可根据您选择的服务覆盖地域城市页面进行推荐展示
                        <a-button type="link" @click="visibleModel = true"> 调整服务覆盖地域 </a-button>
                    </p>
                    <a-input readOnly placeholder="请选择经营地址" v-model="form.address">
                        <a-icon slot="suffix" type="environment" @click="mapShow" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item label="公司标签" prop="label" :colon="false" class="lable-text">
                    <p slot="extra" class="tips">请根据公司的主营业务选择标签，能提升贵公司APP端曝光度</p>
                    <span class="formlabel" :class="{ no_active: !form.label }">{{
                        form.label ? form.label : '请选择标签'
                    }}</span>
                    <a-button type="link" @click="openLabeModal"> 选择标签 </a-button>
                </a-form-model-item>
                <a-form-model-item label="员工规模" :colon="false" class="lable-text">
                    <span class="formlabel">{{ form.employeeScale }}</span>
                    <a-button type="link" @click="visibleScale = true"> 调整员工规模 </a-button>
                </a-form-model-item>
                <a-form-model-item class="item" prop="aboutUs" :colon="false">
                    <span
                        slot="label"
                    >公司介绍
                        <a-popover v-model="companyVisible" trigger="hover">
                            <template slot="content">
                                您可以填写：<br />
                                1.公司概况：这里面可以包括成立时间、注册资本、公司性质、技术力量、规模、员工人数，员工素质等简要，精炼概括；<br />
                                2.公司发展状况：公司的发展历程、有何成绩、有何荣誉称号等；<br />
                                3.公司文化：公司的目标、理念、宗旨、使命、愿景、寄语等；也有可以把董事长寄语放在最前面的；<br />
                                4.公司主要产品：性能、特色； <br />
                                5.业绩及网络：如销售量、各地网店、案例客户等；<br />
                                6.售后服务
                            </template>
                            <a-icon type="question-circle" />
                        </a-popover>
                    </span>
                    <tinymce-editor v-model="form.aboutUs" cosPath="company-richText" :height="400"></tinymce-editor>
                </a-form-model-item>
                <div class="operate">
                    <p>贵公司在本平台的联系方式</p>
                    <div>
                        <a-form-model-item label="联系人" prop="operate" :colon="false">
                            <a-input placeholder="请输入联系人名字" v-model="form.operate"></a-input>
                        </a-form-model-item>
                        <a-form-model-item label="联系电话" prop="operatePhone" :colon="false">
                            <a-input placeholder="请输入联系电话" v-model="form.operatePhone" :maxLength="11"></a-input>
                        </a-form-model-item>
                    </div>
                </div>
                <div class="btn">
                    <a-button type="primary" @click="onSubmit">保存</a-button>
                </div>
            </a-form-model>
        </div>
        <mapLocation :isShow="show" @Mapok="handleChange" @hide="show = false" :cityInfo="cityInfo" />
        <a-modal v-model="visibleModel" title="服务覆盖范围" @ok="handleOk" class="model">
            <a-radio-group v-model="territVal">
                <a-radio-button v-for="(item, index) in coverageList" :key="index" :value="item">
                    {{ item }}
                </a-radio-button>
            </a-radio-group>
        </a-modal>
        <a-modal v-model="visibleScale" title="员工规模" @ok="handleScale" class="model">
            <a-radio-group v-model="scaleVal">
                <a-radio-button v-for="(item, index) in scaleList" :key="index" :value="item">
                    {{ item }}
                </a-radio-button>
            </a-radio-group>
        </a-modal>
        <a-modal
            class="label-model"
            :getContainer="() => $refs.companyData"
            v-model="modalVisible"
            title="公司标签"
            width="50%"
            @ok="handSure"
        >
            <a-tabs>
                <a-tab-pane v-for="item in businessList" :key="item.id" :tab="item.name">
                    <a-tree
                        v-model="item.checkedKeys"
                        checkable
                        :tree-data="item.children"
                        :expanded-keys="expandedKeys(item.children)"
                        :replace-fields="replaceFields"
                    >
                    </a-tree>
                </a-tab-pane>
            </a-tabs>
            <div class="ruslt">
                <p class="lable">
                    已选择标签{{ selectLabalList.length }}个<span>(可多选,最多允许选择10个标签，如超出10个则只会保存前10个选项)</span>
                </p>
                <ul>
                    <li v-for="item in selectLabalList" :key="item.id">
                        <p>{{ item.name }}</p>
                        <i @click="deleteItem(item)">
                            <icon-svg name="close"></icon-svg>
                        </i>
                    </li>
                </ul>
            </div>
        </a-modal>
        <div
            class="mask"
            v-if="maskShow"
            :class="{
                setp1: setp1Show,
                setp2: setp2Show
            }"
        >
            <div class="setp1" v-if="setp1Show">
                <div>
                    <img src="@/assets/images/company-info/ikown.png" @click="handleColseMask" />
                    <img src="@/assets/images/company-info/next.png" @click="next" alt="" />
                </div>
            </div>
            <div class="setp2" v-if="setp2Show">
                <img src="@/assets/images/company-info/over.png" @click="over" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import TinymceEditor from '@/components/tinymce-editor/index.vue'
import mapLocation from '@/components/map-location/index.vue'
import { sessionStorage } from '~/plugins/tools'
export default {
    components: {
        mapLocation,
        TinymceEditor
    },
    data () {
        const validatePhone = (rule, value, callback) => {
            if (value) {
                if (value.length > 11) {
                    callback(new Error('请输入正确的联系电话'))
                } else {
                    callback()
                }
            } else {
                callback()
            }
        }
        return {
            listImg: [],
            authInfo: {},
            typeList: ['image/jpeg', 'image/png', 'image/bmp'],
            path: '/company-certification/img/',
            show: false,
            visibleModel: false,
            visibleScale: false,
            modalVisible: false,
            form: {
                aboutUs: '',
                address: '',
                latitude: '',
                longitude: '',
                logo: [],
                liveShotList: [],
                videoList: {
                    videoUrl: '',
                    imgCoverUrl: ''
                },
                operate: '',
                operatePhone: '',
                employeeScale: '',
                territory: '',
                province: '',
                city: '',
                area: '',
                label: '',
                labelIds: ''
            },
            formRules: {
                logo: [{ required: true, message: '请上传公司logo' }],
                liveShotList: [{ required: true, message: '请上传公司实景' }],
                address: [{ required: true, message: '请选择经营地址' }],
                aboutUs: [{ required: true, message: '请填写' }],
                operate: [{ required: true, message: '请填写联系人姓名' }],
                label: [{ required: true, message: '请选择公司标签' }],
                operatePhone: [{ required: true, validator: validatePhone }]
            },
            visible: false,
            visibleTip: false,
            companyVisible: false,
            coverageList: ['公司所在城市', '当地城市+周边城市', '全国'],
            scaleList: ['0-20人', '20-100人', '100-300人', '300-1000人', '1000人以上'],
            territVal: '',
            scaleVal: '',
            ActiveKey: '',
            businessList: [],
            treeData: [],
            checkedKeys: [],
            replaceFields: { children: 'children', title: 'name', key: 'id' },
            maskShow: false,
            setp1Show: false,
            setp2Show: false,
            copyForm: {}
        }
    },
    computed: {
        cityInfo () {
            const { address, latitude, longitude, province, city, area } = this.form
            return { address, latitude, longitude, province, city, area }
        },
        selectLabalList () {
            const list = []
            this.businessList.forEach((item) => {
                item.children.forEach((subItem) => {
                    subItem.children.forEach((nex) => {
                        item.checkedKeys.forEach((cur) => {
                            if (cur === nex.id) {
                                list.push(nex)
                            }
                        })
                    })
                })
            })
            return list
        }
    },
    watch: {
        form: {
            deep: true,
            handler () {
                this.compareData()
            }
        },
        'form.videoList' (val) {
            console.log(val)
        }
    },
    async mounted () {
        const res = await this.$ApiServer['company/tree']()
        const authInfo = await this.$ApiServer['company/mange/detail']()
        if (res.code === 200) {
            res.data = res.data.filter(item => item.status)
            res.data = res.data.map((item) => {
                return { ...item, checkedKeys: [] }
            })
            res.data.forEach((item) => {
                authInfo.data.primaryBusinessType.split(',').forEach((subItem) => {
                    if (item.id === subItem) {
                        this.businessList.push(item)
                    }
                })
            })
        }
        this.getCompanyAuth()
    },
    methods: {
        async getCompanyAuth () {
            const res = await this.$ApiServer['company/mange/detail']()
            if (res.code === 200) {
                this.authInfo = res.data
                this.form.aboutUs = this.authInfo.aboutUs || ''
                this.form.address = this.authInfo.address || ''
                this.form.province = this.authInfo.province || ''
                this.form.city = this.authInfo.city || ''
                this.form.area = this.authInfo.area || ''
                this.form.latitude = this.authInfo.latitude || ''
                this.form.longitude = this.authInfo.longitude || ''
                this.form.labelIds = this.authInfo.labelIds || ''
                this.form.logo = this.authInfo.logo ? this.authInfo.logo.split(',') : []
                this.form.liveShotList = this.authInfo.liveShotList || []
                this.form.operate = this.authInfo.operate || ''
                this.form.operatePhone = this.authInfo.operatePhone || ''
                this.form.employeeScale = this.authInfo.employeeScale ? this.authInfo.employeeScale : ''
                this.form.territory = this.authInfo.territory ? this.authInfo.territory : ''
                this.form.videoList.videoUrl = this.authInfo.videoUrl
                this.form.videoList.imgCoverUrl = this.authInfo.imgCoverUrl
                this.scaleVal = this.form.employeeScale
                this.territVal = this.form.territory
                const list = this.form.labelIds.split(',') || []
                const arrList = []
                this.businessList.forEach((item) => {
                    item.children.forEach((subItem) => {
                        subItem.children.forEach((nex) => {
                            list.forEach((curItem) => {
                                if (curItem === nex.id) {
                                    arrList.push(nex)
                                }
                            })
                        })
                    })
                })
                this.form.label = arrList.map(item => item.name).join(',') || ''
                const isShow = JSON.parse(sessionStorage.getItem('isShow'))
                if (!this.form.logo.length && !(isShow === false)) {
                    this.maskShow = true
                    this.setp1Show = true
                }
                this.copyForm = JSON.parse(JSON.stringify(this.form))
                this.compareData()
            }
        },
        // 比较表单前后的值是否一样
        compareData () {
            const list = Object.values(this.form).filter(item => String(item) === '')
            const copyList = Object.values(this.copyForm).filter(item => String(item) === '')
            // 1.表单还没填完 第一次填写
            if (list.length) {
                this.$emit('fullInfo', '1')
            } else {
                let falg = true
                for (const key in this.form) {
                    if (Object.hasOwnProperty.call(this.form, key)) {
                        if (String(this.form[key]) !== String(this.copyForm[key])) {
                            falg = false
                        }
                    }
                }
                if (
                    this.form.videoList.videoUrl !== this.copyForm.videoList.videoUrl ||
                    this.form.videoList.imgCoverUrl !== this.copyForm.videoList.imgCoverUrl
                ) {
                    falg = false
                }
                if (falg && !copyList.length) {
                    // 3.已经填过表单  这次是回显
                    this.$emit('fullInfo', '3')
                } else if (!falg && copyList.length) {
                    // 2.第一次填写  表单填写完了  但是没提交
                    this.$emit('fullInfo', '2')
                } else {
                    // 4.这是做过编辑 if (!falg && !copyList.length)
                    this.$emit('fullInfo', '4')
                }
            }
        },
        handleLogoChange (data) {
            this.form.logo = data
        },
        handleliveShotListChange (data) {
            this.liveShotList = data
        },
        mapShow () {
            this.show = true
        },
        handleChange (data) {
            this.form.address = data.address
            this.form.latitude = data.latitude
            this.form.longitude = data.longitude
            this.form.province = data.province
            this.form.city = data.city
            this.form.area = data.area
            this.show = false
        },
        handleOk () {
            this.form.territory = this.territVal
            this.visibleModel = false
        },
        handleScale () {
            this.form.employeeScale = this.scaleVal
            this.visibleScale = false
        },
        onSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const {
                        aboutUs,
                        address,
                        latitude,
                        liveShotList,
                        longitude,
                        operate,
                        operatePhone,
                        province,
                        city,
                        area,
                        labelIds,
                        territory,
                        employeeScale,
                        logo
                    } = this.form
                    const { imgCoverUrl, videoUrl } = this.form.videoList
                    this.$ApiServer['company/submit/info']({
                        aboutUs,
                        address,
                        latitude,
                        liveShotList,
                        longitude,
                        operate,
                        operatePhone,
                        province,
                        city,
                        area,
                        labelIds,
                        logo: logo.join(','),
                        territory,
                        employeeScale,
                        imgCoverUrl,
                        videoUrl
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success('保存成功')
                            this.getCompanyAuth()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    return false
                }
            })
        },
        openLabeModal () {
            // 打开选择标签的弹窗的时候
            const list = this.form.labelIds.split(',')
            this.businessList.forEach((item) => {
                // 1.先把tree绑定的值清空
                item.checkedKeys = []
                item.children.forEach((subItem) => {
                    subItem.children.forEach((nex) => {
                        list.forEach((curItem) => {
                            if (curItem === nex.id) {
                                // 2.这里再从新赋值 方便回显
                                item.checkedKeys.push(curItem)
                            }
                        })
                    })
                })
            })
            this.modalVisible = true
        },
        // 图片上传成功后
        handleUploadSuccess (data) {
            console.log(data)
        },
        expandedKeys (arry) {
            const list = []
            arry.forEach((item) => {
                list.push(item.id)
            })
            return list
        },
        deleteItem (item) {
            this.businessList.forEach((subItem) => {
                subItem.children.forEach((cur) => {
                    // 如果有全选的  删除父节点的id
                    const indx = subItem.checkedKeys.findIndex((it) => {
                        return it === cur.id
                    })
                    if (indx > -1) {
                        subItem.checkedKeys.splice(indx, 1)
                    }
                })
                // 删除子节点的id 通过计算属性自动去获取
                const index = subItem.checkedKeys.findIndex((it) => {
                    return it === item.id
                })
                if (index > -1) {
                    subItem.checkedKeys.splice(index, 1)
                }
            })
        },
        handSure () {
            this.modalVisible = false
            this.form.label = this.selectLabalList
                .slice(0, 10)
                .map(item => item.name)
                .join(',')
            this.form.labelIds = this.selectLabalList
                .slice(0, 10)
                .map(item => item.id)
                .join(',')
        },

        handleColseMask () {
            this.maskShow = false
            sessionStorage.setItem('isShow', false)
        },
        next () {
            this.setp1Show = false
            this.$nextTick(() => {
                this.$refs.left.scrollTop = this.$refs.left.scrollHeight
                this.setp2Show = true
            })
        },
        over () {
            this.$nextTick(() => {
                this.$refs.left.scrollTop = 0
                this.setp2Show = false
                this.maskShow = false
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container-data {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: transparent;
    justify-content: space-between;
    &-left {
        width: 100%;
        height: 100%;
        padding-bottom: 0.4rem;
        background-color: #fff;
        overflow-y: auto;
        border-radius: 0 0 6px 6px;
        .name {
            padding-left: 0.8rem;
            font-size: 0.14rem;
            margin: 0.3rem 0;
            display: flex;
            align-items: center;
            span {
                color: #2a2a2a;
                margin-right: 0.35rem;
            }
            font {
                color: #666666;
                font-size: 14px;
                display: inline-block;
                height: 32px;
                border: 1px solid #ccc;
                border-radius: 4px;
                line-height: 32px;
                padding: 0 10px;
            }
        }
        .ant-form {
            ::v-deep {
                .ant-form-item {
                    display: flex;
                    padding-left: 0.2rem;
                    padding-right: 0.2rem;
                    .tips {
                        font-size: 0.12rem;
                        color: #666666;
                    }
                    .has-error {
                        .ant-input:not([disabled]),
                        .ant-input:not([disabled]):hover {
                            border-color: @primary-color !important;
                        }
                    }
                    .ant-form-item-label {
                        width: 1.2rem;
                        font-size: 0.16rem;
                        color: @primary-color;
                        text-align: right;
                        flex-shrink: 0;
                        margin-right: 0.3rem;
                        label {
                            font-size: 0.14rem;
                            color: #2a2a2a;
                            .anticon {
                                color: @primary-color;
                                cursor: pointer;
                            }
                        }
                    }
                    &.item {
                        .ant-form-item-label {
                            position: relative;
                            line-height: 14px;
                        }
                        .ant-form-item-control {
                            display: flex;
                            flex-direction: column;
                            position: relative;
                            .anticon.anticon-question-circle {
                                cursor: pointer;
                                color: @primary-color;
                                font-size: 0.16rem;
                                padding-top: 0.1rem;
                            }
                        }
                    }
                    &.lable-text {
                        .formlabel {
                            display: inline-block;
                            height: 32px;
                            border: 1px solid #ccc;
                            border-radius: 4px 0 0 4px;
                            min-width: 270px;
                            line-height: 32px;
                            padding: 0 10px;
                            &.no_active {
                                color: #ccc;
                            }
                        }
                        .ant-btn-link {
                            display: inline-block;
                            height: 32px;
                            border: 1px solid #ccc;
                            border-left: none;
                            padding: 0 8px;
                            border-radius: 0px 4px 4px 0;
                        }
                        .ant-form-item-children {
                            display: flex !important;
                            align-items: center !important;
                        }
                    }
                    .ant-form-item-children {
                        .ant-input-suffix i {
                            cursor: pointer;
                            color: @primary-color;
                            font-size: 0.18rem;
                        }
                    }
                    .ant-btn-link {
                        padding: 0;
                        color: @primary-color;
                        border: none;
                        font-size: 0.12rem;
                    }
                }
                .operate {
                    display: inline-block;
                    background: #ffffff;
                    border-radius: 0.04rem;
                    padding: 0.1rem;
                    padding-left: 0.65rem;
                    p {
                        font-size: 0.14rem;
                        color: @primary-color;
                    }
                    & > div {
                        margin-top: 0.1rem;
                        .ant-form-item {
                            padding-left: 0;
                            margin-bottom: 0;
                            .ant-form-item-label {
                                width: 0.8rem;
                                margin-right: 0.25rem;
                            }
                            .ant-form-item-control {
                                width: 2.7rem;
                            }
                        }
                    }
                }
                .btn {
                    display: flex;
                    margin-top: 0.2rem;
                    padding-left: 1.7rem;
                    button {
                        width: 0.9rem;
                        border-radius: 2px;
                    }
                }
            }
        }
    }
}

.model {
    ::v-deep {
        .ant-radio-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .ant-radio-button-wrapper {
                border-radius: 4px;
                border-width: 1px;
                border-style: solid;
                border-color: #ccc;
                &.ant-radio-button-wrapper-checked {
                    border: 1px solid @primary-color;
                }
                &::before {
                    display: none;
                }
            }
            label {
                margin-bottom: 0.2rem;
                border-radius: none;
            }
        }
    }
}

.label-model {
    ::v-deep {
        .ant-modal-body {
            padding-top: 0;
        }
        .ant-tree {
            margin-top: 10px;
            background-color: #fafafa;
            border-radius: 4px;
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            max-height: 480px;
            overflow-y: auto;
            .ant-tree-treenode-switcher-open {
                margin-right: 14px;
                margin-bottom: 14px;
            }
            .ant-tree-switcher.ant-tree-switcher_open,
            .ant-tree-switcher.ant-tree-switcher-noop {
                display: none;
            }
        }
        .ruslt {
            margin-top: 10px;
            background-color: #fafafa;
            border-radius: 4px;
            padding: 10px;
            .lable {
                font-size: 16px;
                border-bottom: 1px solid #e4ebf1;
                span {
                    font-size: 12px;
                }
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                li {
                    position: relative;
                    display: inline-block;
                    padding: 2px 6px;
                    font-size: 14px;
                    border: 1px solid #cfd8dc;
                    border-radius: 2px;
                    margin: 8px 20px 6px 0;
                    &:hover i {
                        display: block;
                    }
                    i {
                        position: absolute;
                        top: -8px;
                        right: -8px;
                        display: none;
                        svg {
                            font-size: 16px;
                            border-radius: 50%;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    &.setp1 {
        background-image: url('~@/assets/images/company-info/setp1.png');
    }
    &.setp2 {
        background-image: url('~@/assets/images/company-info/setp2.png');
    }
    .setp1 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        div {
            position: absolute;
            bottom: 120px;
            width: 422px;
            right: 400px;
            display: flex;
            img:nth-child(1) {
                width: 280px;
                height: 57px;
                cursor: pointer;
            }
            img:nth-child(2) {
                width: 142px;
                height: 57px;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }
    .setp2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        img {
            width: 364px;
            height: 57px;
            position: absolute;
            bottom: 50px;
            left: 35%;
            cursor: pointer;
        }
    }
}
</style>
